<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
		<meta name="description" content="">
		<meta name="author" content="">
	    <link rel="icon" href="images/ico/fav.ico" mce_href="images/ico/fav.ico" type="image/x-icon">  
	    <link rel="shortcut icon" href="images/ico/fav.ico" mce_href="images/ico/fav.ico" type="image/x-icon">
		<title>Renda - clean blog theme based on Bootstrap</title>
		<!-- Bootstrap core CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/font-awesome.min.css">
		<!-- Custom styles for this template -->
		<!-- <link href="css/jquery.bxslider.css" rel="stylesheet"> -->
		<link href="css/style.css" rel="stylesheet">
		<style>
		#content{
			padding-top: 60px;
		}
		</style>
	</head>
	<body>
	    <header id="header">
	        <nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
	            <div class="container">
	                <div class="navbar-header">
	                    <!-- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	                        <span class="sr-only">Toggle navigation</span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                    </button> -->
	                    <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo"></a>
	                </div>
					
	                <div class="collapse navbar-collapse navbar-right">
	                    <ul class="nav navbar-nav">	                        
	                        <li class="scroll"><a href="./index.html#home">首页</a></li>
	                        <!-- <li class="scroll"><a href="#features">Features</a></li> -->
	                        <li class="scroll"><a href="./index.html#services">服务</a></li>
	                        <li class="scroll"><a href="./index.html#portfolio">案例</a></li>
	                        <li class="scroll"><a href="./index.html#about">关于</a></li>
	                        <li class="scroll"><a href="./index.html#meet-team">团队</a></li>
	                        <!-- <li class="scroll"><a href="#pricing">Pricing</a></li> -->
	                        <li class="scroll active"><a href="./blogs.html">博客</a></li> 
	                        <li class="scroll"><a href="./index.html#get-in-touch">联系方式</a></li>                       
	                    </ul>
	                </div>
	            </div><!--/.container-->
	        </nav><!--/nav-->
	    </header><!--/header-->

		<div class="container" id="content">	
		<section>
			<div class="row">
				<div class="col-md-8">
					<article class="blog-post">
						<div class="blog-post-image">
							<a href="#"><img src="" alt=""></a>
						</div>
						<div class="blog-post-body">
							<h2><a href="#"></a></h2>
							<div class="post-meta"><span>by <a href="#"></a></span>/<span><i class="fa fa-clock-o"></i></span><!-- /<span><i class="fa fa-comment-o"></i> <a href="#">343</a></span> --></div>
							<div class="blog-post-text"></div>
						</div>
					</article>
				</div>

				<!-- 右侧边栏 Start -->
				<div class="col-md-4 sidebar-gutter">
					<aside>
					<!-- sidebar-widget -->
					<div class="sidebar-widget">
						<h3 class="sidebar-title">我</h3>
						<div class="widget-container widget-about">
							<a href="post.html"><img src="images/blog/author.jpg" alt=""></a>
							<h4>老王</h4>
							<!-- <div class="author-title">Designer</div> -->
							<p>嘿，我是老王，一个码工，编龄6、7年，项目十来个。虽已步入不惑之年，然环顾四周，家徒四壁。为补家用，特成立此室，以盈客八方，结友朋五湖。</p>
						</div>
					</div>
					<!-- sidebar-widget -->
					<div class="sidebar-widget">
						<h3 class="sidebar-title">精选发布</h3>
						<div class="widget-container" id="choice">
							<article class="widget-post">
								<div class="post-image">
									<a href=""><img src="" alt=""></a>
								</div>
								<div class="post-body">
									<h2><a href=""></a></h2>
									<div class="post-meta">
										<span>by <a href="#"></a></span> /   <span><i class="fa fa-clock-o"></i> </span> <!-- <span><a href="post.html"><i class="fa fa-comment-o"></i> 23</a></span> -->
									</div>
								</div>
							</article>
						</div>
					</div>
					<!-- sidebar-widget -->
					<!-- <div class="sidebar-widget">
						<h3 class="sidebar-title">Socials</h3>
						<div class="widget-container">
							<div class="widget-socials">
								<a href="#"><i class="fa fa-facebook"></i></a>
								<a href="#"><i class="fa fa-twitter"></i></a>
								<a href="#"><i class="fa fa-instagram"></i></a>
								<a href="#"><i class="fa fa-google-plus"></i></a>
								<a href="#"><i class="fa fa-dribbble"></i></a>
								<a href="#"><i class="fa fa-reddit"></i></a>
							</div>
						</div>
					</div> -->
					<!-- sidebar-widget -->
					<div class="sidebar-widget" id="category">
						<h3 class="sidebar-title">博客分类</h3>
						<div class="widget-container">
							<ul></ul>
						</div>
					</div>
					</aside>
				</div>
				<!-- 右侧边栏 End -->
			</div>
		</section>
		</div><!-- /.container -->

		<footer class="footer">

			<div class="footer-socials">
				<a href="#"><i class="fa fa-facebook"></i></a>
				<a href="#"><i class="fa fa-twitter"></i></a>
				<a href="#"><i class="fa fa-instagram"></i></a>
				<a href="#"><i class="fa fa-google-plus"></i></a>
				<a href="#"><i class="fa fa-dribbble"></i></a>
				<a href="#"><i class="fa fa-reddit"></i></a>
			</div>

			<div class="footer-bottom">
				<i class="fa fa-copyright"></i> 2017 老王的BAM工作室
			</div>
		</footer>

		<!-- Bootstrap core JavaScript
			================================================== -->
		<!-- Placed at the end of the document so the pages load faster -->
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<!-- <script src="js/jquery.bxslider.js"></script>
		<script src="js/mooz.scripts.min.js"></script> -->

		<script>
			/********** 获取URL中参数值 Start **********/
			function GetQueryString(name){
			     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			     var r = window.location.search.substr(1).match(reg);
			     if(r!=null) 
			     	return unescape(r[2]); 
			     else
			     	return null;
			} 
			/********** 获取URL中参数值 End **********/
		</script>
		
		<script>		
		$(document).ready(function() {
		   	var id = GetQueryString("id");
		   	var tmp2 = $("#choice").children().first();
		   	tmp2.hide();
		   	var art = null;

			/********** Choice Start **********/
		   	//精选发布中item模板 和 blog的标题、日期等信息
		   	$.getJSON("./blogs/list.json?_="+(new Date().getTime()), function(json){
		   		//右侧博客分类
		   		$.each(json.class,function(i,n){
		   			$("#category")
		   			.find("ul")
		   			.append("<li><a href='./blogs.html?class="+i+"'>"+n+"</a></li>");
		   		});	
		   		//中间博客标题等 与 右侧精选发布
		   		$.each(json.blogs,function(i,n){
		   			//博客标题等
		   			if(n.id==id){		   				
			   			//设置图片
			   			$(".blog-post-image").find("img").attr("src", "./blogs/mimg/"+n.mimg);
			   			//设置URL
			   			$(".blog-post-body").find("a").attr("href", n.href);
			   			//设置标题
			   			$(".blog-post-body").find("h2 > a").html(n.title);
			   			//设置作者
			   			$(".blog-post-body > .post-meta").find("a:first").html(n.author);
			   			//设置发布时间
			   			$(".blog-post-body > .post-meta").find("i:first").after(n.time);
		   			}

		   			//精选发布
		   			if(n.featured=="1"){
		   				art = $(tmp2).clone().appendTo("#choice").show();
			   			//设置图片
			   			$(art).children(".post-image").find("img").attr("src", "./blogs/simg/"+n.simg);
			   			//设置URL
			   			$(art).children(".post-body").find("a").attr("href", n.href);
			   			//设置标题
			   			$(art).children(".post-body").find("h2 > a").html(n.title);
			   			//设置作者
			   			$(art).find(".post-body > .post-meta").find("a:first").html(n.author);
			   			//设置发布时间
			   			$(art).find(".post-body > .post-meta").find("i:first").after(n.time);
			   			//设置简介内容
			   			$(art).children(".post-body").find("p").html(n.intro);
		   			}
		   		});	   		
			});
		    /********** Choice End **********/

			/********** Blog Start **********/
		    $.getJSON("./blogs/"+id+".json?_="+(new Date().getTime()), function(data){
	   			//设置blog内容
	   			$(".blog-post-body > .blog-post-text").html(data.article);
		    });
			/********** Blog End **********/
		});
		</script>
	</body>
</html>